/*
 * Header, chân trang và các khối bố cục chung.
 *
 * Màu và chiều cao lấy từ token trong style.css, vốn đo lại từ giao diện đang
 * chạy của site. Tên class giữ nguyên để CSS riêng của site tiếp tục đè được.
 */


/* ==========================================================================
   Header — ba tầng: #top-bar, #masthead, #wide-nav

   Số đo đối chiếu với trang render bằng theme cũ:
     desktop 1280px : tầng trên 40px · tầng chính 120px · menu 46px
     điện thoại     : tầng chính 70px · thanh tìm kiếm 50px, tầng trên ẩn
   CSS riêng của site (site.css) phủ lên phần trang trí; ở đây chỉ dựng khung.
   ========================================================================== */

.header {
	position: relative;
	z-index: 30;
	width: 100%;
}

.header-wrapper {
	position: relative;
	width: 100%;
}

.header-top,
.header-main,
.header-bottom {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.header-top > .flex-row,
.header-bottom > .flex-row,
.header-inner {
	height: 100%;
}

.header-top {
	min-height: var(--xmn-header-top-height);
	background-color: var(--xmn-header-top-bg);
}

.header-main {
	height: 120px;
	background-color: var(--xmn-header-main-bg);
}

.header-bottom {
	min-height: 46px;
	background-color: var(--xmn-header-bottom-bg);
}

@media screen and (max-width: 849px) {
	.header-bottom {
		min-height: 50px;
	}
}

/* Chỉ điện thoại mới thu tầng header chính lại; máy tính bảng giữ chiều cao
   như máy tính (theo cài đặt của theme cũ). */
@media screen and (max-width: 549px) {
	.header-main {
		height: 70px;
	}
}

/* ---------- Logo ---------- */

.logo {
	flex: 0 0 auto;
	margin: 0 30px 0 0;
	line-height: 1;
	height: 100%;
	display: flex;
	align-items: center;
}

.logo a {
	display: block;
	height: 100%;
	text-decoration: none;
}

.logo img {
	display: block;
	width: auto;
	height: 100%;
	max-height: 120px;
	object-fit: contain;
}

.logo-text {
	display: flex;
	align-items: center;
	height: 100%;
	color: #fff;
	font-family: var(--xmn-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Điện thoại: logo giữa, nút menu trái, giỏ hàng phải */
@media screen and (max-width: 849px) {
	/* Logo giữ bề rộng tự nhiên (cách hai bên 15px); cột trái và phải chia
	   đều phần còn lại nên logo luôn nằm giữa. */
	.medium-logo-center .logo {
		order: 2;
		flex: 0 0 auto;
		justify-content: center;
		margin: 0 15px;
		text-align: center;
	}

	.medium-logo-center .logo img {
		margin: 0 auto;
	}

	.medium-logo-center > .flex-left {
		order: 1;
		flex: 1 1 0;
		margin: 0;
	}

	.medium-logo-center > .flex-right {
		order: 3;
		flex: 1 1 0;
		margin: 0;
	}
}

/* ==========================================================================
   Danh sách thành phần (ul.nav) trong mọi tầng
   ========================================================================== */

.nav {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-left   { justify-content: flex-start; }
.nav-right  { justify-content: flex-end; }
.nav-center { justify-content: center; }

.nav > li {
	position: relative;
	display: inline-block;
	margin: 0 7px;
	padding: 0;
	list-style: none;
}

.nav > li:first-child { margin-left: 0; }
.nav > li:last-child  { margin-right: 0; }

.nav-spacing-xlarge > li {
	margin: 0 13px;
}

/* Menu ngang bật từ 850px (.hide-for-medium), nhưng 8 mục tiếng Việt cần ~985px
   nên từ 850px tới ~985px nó rớt xuống hai hàng. Thu cỡ chữ và padding lại trong
   đúng dải đó để menu nằm gọn một hàng; trên 1100px giữ nguyên như cũ.
   Phải kèm #wide-nav vì site.css:2122 đặt cỡ chữ bằng selector có ID. */
@media screen and (min-width: 850px) and (max-width: 1100px) {
	#wide-nav .header-bottom-nav.nav > li > a {
		padding: 0 3px;
		font-size: 13px;
	}
}

.nav > li > a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 0;
	color: inherit;
	font-size: 0.8em;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* Biểu tượng đứng riêng trong mục menu (nút mở menu, kính lúp) */
.nav > li > a > i {
	font-size: 20px;
	vertical-align: middle;
	transition: color 0.3s;
}

.nav > li > a > i + span {
	margin-left: 5px;
}

.nav > li > a > i.icon-search {
	font-size: 1.2em;
}

.nav > li > a > i.icon-menu {
	font-size: 1.9em;
}

/* Dải nhỏ (tầng trên cùng): chữ không đậm — chọn chặt hơn luật đậm 500 của
   menu trong lớp CSS sinh từ cài đặt, như theme cũ. Cỡ chữ để ở luật lỏng
   bên dưới để site.css (.top-bar-nav > li > a: 14px) còn đè được. */
.nav.nav-small > li > a,
.nav-small .nav > li > a {
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: normal;
}

.nav-small > li > a {
	font-size: 0.9em;
}

.nav-uppercase > li > a {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 700;
}

/* Nền tối: chữ trắng */
.nav-dark .nav > li > a,
.header-main .nav > li > a {
	color: rgba(255, 255, 255, 0.85);
}

.nav-dark .nav > li.html,
.header-main .nav > li.html {
	color: #fff;
}

.nav-dark .nav > li > a:hover,
.header-main .nav > li > a:hover {
	color: #fff;
}

.nav > li.html {
	font-size: 0.85em;
}

.nav-small.nav > li.html {
	font-size: 0.75em;
}

.nav > li.html a {
	color: inherit;
	text-decoration: none;
}

/* Ảnh biểu tượng do plugin Menu Icons chèn trước chữ */
.nav img._mi {
	display: inline-block;
	width: auto;
	max-height: 24px;
	margin-right: 6px;
	vertical-align: middle;
}

/* Mũi tên của mục có menu con */
.nav > li > a .icon-angle-down {
	margin-left: 5px;
	font-size: 0.8em;
	opacity: 0.8;
}

/* ---------- Menu chính (tầng dưới) ---------- */

.header-bottom-nav > li > a {
	color: #fff;
	font-size: 0.9em;
	padding: 12px 0;
}

/* ---------- Menu đổ xuống ---------- */

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 240px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--xmn-primary);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav > li:hover > .nav-dropdown,
.nav > li.is-open > .nav-dropdown,
.nav-dropdown li:hover > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-dropdown li {
	position: relative;
	margin: 0;
	list-style: none;
}

.nav-dropdown a {
	display: block;
	padding: 9px 16px;
	color: #fff;
	font-size: 0.9rem;
	text-decoration: none;
}

.nav-dropdown a:hover {
	background-color: #fff;
	color: var(--xmn-text);
}

.nav-dropdown .nav-dropdown {
	top: 0;
	left: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.nav-dropdown {
		transition: none;
	}
}

/* ==========================================================================
   Ô tìm kiếm
   ========================================================================== */

.header-search-form {
	flex: 1 1 auto;
}

.header-search-form-wrapper,
.searchform-wrapper {
	width: 100%;
}

.searchform {
	position: relative;
	width: 100%;
}

/* Form, ô nhập, hàng lưới nằm trong ô HTML của header không có lề. */
li.html .row,
li.html form,
li.html select,
li.html input {
	margin: 0;
}

.searchform .flex-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
}

.searchform .flex-col {
	margin: 0;
}

/* Ô nhập tìm kiếm: cùng khung với ô nhập thường (style.css), dạng phẳng.
   Hình dạng cụ thể (bo tròn trái, cao 37px, nền trắng) do site.css quyết định. */
.search-field {
	-webkit-appearance: none;
	appearance: none;
}

.search-field:focus {
	outline: 2px solid transparent;
}

.mobile-nav .header-search-form {
	width: 100%;
	margin: 0;
}

/* ==========================================================================
   Nút giỏ hàng
   Tiền tố .header: trên trang WooCommerce, body có class .woocommerce nên quy
   tắc `.woocommerce a.button` (0,1,2) sẽ đè nếu ở đây chỉ là một class.
   ========================================================================== */

.header-button {
	display: inline-block;
}

.header .header-cart-link {
	position: relative;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 99px;
	background-color: var(--xmn-primary);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 2.4em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Số lượng trong giỏ: chấm tròn góc trên biểu tượng, lấy số từ thuộc tính
   data-icon-label; ẩn khi giỏ trống. */
[data-icon-label] {
	position: relative;
}

[data-icon-label]::after {
	content: attr(data-icon-label);
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 1;
	min-width: 17px;
	height: 17px;
	padding: 0 2px;
	border-radius: 99px;
	background-color: var(--primary-color, #446084);
	box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
	color: #fff;
	font-family: Arial, sans-serif !important;
	font-size: 11px;
	font-style: normal;
	font-weight: bolder;
	letter-spacing: -0.5px;
	line-height: 17px;
	text-align: center;
	opacity: 0.9;
	transition: transform 0.2s;
}

.button [data-icon-label]::after {
	top: -12px;
	right: -12px;
}

[data-icon-label="0"]::after {
	display: none;
}

.header .header-cart-link:hover {
	background-color: var(--xmn-primary-dark);
	color: #fff;
}

/* ==========================================================================
   Biểu tượng mạng xã hội
   ========================================================================== */

/* Chung: nút theo dõi (header) và nút chia sẻ (bài viết) */
.social-icons {
	display: inline-block;
	color: #999;
	font-size: 0.85em;
	vertical-align: middle;
}

.html .social-icons {
	font-size: 1em;
}

.html .social-icons .button {
	margin-bottom: 0;
}

.social-icons span {
	padding-right: 10px;
	font-weight: bold;
}

.social-icons i {
	min-width: 1em;
}

.text-center .social-icons {
	margin-left: auto;
	margin-right: auto;
}

.nav-dark .social-icons,
.dark .social-icons {
	color: #fff;
}

.nav-dark .social-icons .button.is-outline,
.dark .social-icons .button.is-outline {
	border-color: rgba(255, 255, 255, 0.5);
}

/* Nút đặc hoặc khi rê chuột: nền màu thương hiệu của mạng, biểu tượng trắng */
.social-icons .button.icon:not(.is-outline),
.social-icons .button.icon:hover {
	border-color: currentColor !important;
	background-color: currentColor !important;
}

.social-icons .button.icon:not(.is-outline) > i,
.social-icons .button.icon:hover > i {
	color: #fff !important;
}

.button.facebook:not(.is-outline),
.button.facebook:hover { color: #3a589d !important; }
.button.twitter:not(.is-outline),
.button.twitter:hover { color: #2478ba !important; }
.button.email:not(.is-outline),
.button.email:hover,
.button.tiktok:not(.is-outline),
.button.tiktok:hover { color: #111 !important; }
.button.pinterest:not(.is-outline),
.button.pinterest:hover { color: #cb2320 !important; }
.button.whatsapp:not(.is-outline),
.button.whatsapp:hover,
.button.phone:not(.is-outline),
.button.phone:hover { color: #51cb5a !important; }
.button.linkedin:not(.is-outline),
.button.linkedin:hover { color: #0072b7 !important; }
.button.instagram:not(.is-outline),
.button.instagram:hover { color: #3b6994 !important; }
.button.youtube:not(.is-outline),
.button.youtube:hover { color: #c33223 !important; }
.button.tumblr:not(.is-outline),
.button.tumblr:hover { color: #36455d !important; }
.button.vk:not(.is-outline),
.button.vk:hover { color: #527498 !important; }

/* Nút bo góc nhẹ */
.round {
	border-radius: 5px;
}

/* Riêng dải theo dõi ở tầng trên cùng header: biểu tượng trơn cỡ nhỏ */
.follow-icons {
	line-height: 1;
	white-space: nowrap;
}

.follow-icons a.icon {
	display: inline-block;
	margin: 0 3.6px;
	color: inherit;
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.follow-icons i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26.4px;
	font-size: 12px;
	line-height: 1.2;
}

/* ==========================================================================
   Biểu tượng
   Theme cũ có bộ font icon riêng. Ở đây ánh xạ cùng tên class sang
   Font Awesome 4 để markup cũ trong template và nội dung vẫn hiện đúng.
   ========================================================================== */

[class^="icon-"],
[class*=" icon-"] {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
}

.icon-shopping-cart::before   { content: "\f07a"; }
.icon-shopping-bag::before    { content: "\f290"; }
.icon-angle-down::before      { content: "\f107"; }
.icon-angle-up::before        { content: "\f106"; }
.icon-angle-left::before      { content: "\f104"; }
.icon-angle-right::before     { content: "\f105"; }
.icon-facebook::before        { content: "\f09a"; }
.icon-instagram::before       { content: "\f16d"; }
.icon-youtube::before         { content: "\f16a"; }
.icon-twitter::before         { content: "\f099"; }
.icon-pinterest::before       { content: "\f0d2"; }
.icon-linkedin::before        { content: "\f0e1"; }
.icon-envelop::before,
.icon-email::before           { content: "\f0e0"; }
.icon-phone::before           { content: "\f095"; }
.icon-user::before            { content: "\f007"; }
.icon-heart::before           { content: "\f004"; }
.icon-star::before            { content: "\f005"; }
.icon-checkmark::before       { content: "\f00c"; }
.icon-tag::before             { content: "\f02b"; }
.icon-close::before           { content: "\f00d"; }
.icon-plus::before            { content: "\f067"; }
.icon-minus::before           { content: "\f068"; }
.icon-expand::before          { content: "\f065"; }
.icon-whatsapp::before        { content: "\f232"; }
.icon-vk::before              { content: "\f189"; }
.icon-tumblr::before          { content: "\f173"; }
.icon-google-plus::before     { content: "\f0d5"; }
.icon-user-o::before          { content: "\f2c0"; }
.icon-lock::before            { content: "\f023"; }
.icon-dribbble::before        { content: "\f17d"; }

/* Font Awesome 4 không có TikTok: vẽ bằng SVG */
.icon-tiktok::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3v178.8A162.6 162.6 0 1 1 185 188.3v89.9a74.6 74.6 0 1 0 52.2 71.2V0h88a121 121 0 0 0 1.9 22.2A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3v178.8A162.6 162.6 0 1 1 185 188.3v89.9a74.6 74.6 0 1 0 52.2 71.2V0h88a121 121 0 0 0 1.9 22.2A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ba biểu tượng dùng nhiều nhất ở header (menu, tìm kiếm, giỏ hàng): vẽ bằng
   SVG nét mảnh cho giống bộ biểu tượng cũ, thay cho nét đậm của Font Awesome.
   Hình do theme tự vẽ; màu lấy theo màu chữ (currentColor). */
.icon-menu::before,
.icon-search::before,
.icon-shopping-basket::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	vertical-align: -0.14em;
	-webkit-mask: var(--xmn-icon) center / contain no-repeat;
	mask: var(--xmn-icon) center / contain no-repeat;
}

.icon-menu::before {
	--xmn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2.5 5.5h19M2.5 12h19M2.5 18.5h19'/%3E%3C/svg%3E");
}

.icon-search::before {
	--xmn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.2'/%3E%3Cpath d='M16 16l5.5 5.5'/%3E%3C/svg%3E");
}

.icon-shopping-basket::before {
	width: 1.17em;
	--xmn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5h24l-2.2 10.3a2 2 0 0 1-2 1.7H6.2a2 2 0 0 1-2-1.7z'/%3E%3Cpath d='M9 9.5l4-7M19 9.5l-4-7'/%3E%3Cpath d='M10 13.5v4M14 13.5v4M18 13.5v4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Menu điện thoại (trượt từ trái)
   ========================================================================== */

.nav-icon a {
	color: #fff;
	text-decoration: none;
}

/* Menu dọc (menu trượt, menu tài khoản) */
.nav.nav-vertical {
	flex-flow: column;
}

.nav.nav-vertical li {
	width: 100%;
	margin: 0;
	list-style: none;
}

.nav-vertical > li {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.nav-vertical > li + li {
	border-top: 1px solid #ececec;
}

.nav-vertical > li > a,
.nav-vertical > li > ul > li a {
	display: flex;
	flex-grow: 1;
	align-items: center;
	width: auto;
}

.nav-vertical > li > ul {
	width: 100%;
	margin: 0 0 2em;
	padding-left: 1em;
}

/* Menu con trong menu dọc: không lề, không thụt ở khung, mỗi mục lùi nửa chữ. */
.nav ul:not(.nav-dropdown) {
	margin: 0;
	padding: 0;
}

.nav-vertical li li {
	padding-left: 0.5em;
	font-size: 1em;
}

.nav-vertical > li > ul li a {
	color: #666;
	transition: color 0.2s;
}

.nav-vertical > li > ul li a:hover {
	color: #111;
	opacity: 1;
}

/* Khung trượt từ trái: rộng 260px, nền trắng mờ (trên điện thoại CSS của
   site tô xanh ngọc cho .mfp-content), lớp nền tối phía sau, nút đóng ở góc
   phải màn hình. Số đo như theme cũ. */
.xmn-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1043;
	visibility: hidden;
	pointer-events: none;
}

.xmn-offcanvas.is-open {
	visibility: visible;
	pointer-events: auto;
}

/* Plugin devvn-woocommerce-reviews đặt `.mfp-bg{z-index:99999999}` toàn cục,
   khiến lớp nền phủ lên panel và nuốt click. Ba giá trị dưới xếp lại thứ tự
   bên trong ngăn kéo — đủ vì .xmn-offcanvas đã tạo stacking context riêng. */
.xmn-offcanvas .mfp-bg {
	position: fixed;
	inset: 0;
	z-index: 1;
	background-color: #0b0b0b;
	opacity: 0;
	transition: opacity 0.3s;
}

.xmn-offcanvas.is-open .mfp-bg {
	opacity: 0.6;
}

.xmn-offcanvas .mfp-content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 260px;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	transform: translateX(-100%);
	transition: transform 0.3s;
	-webkit-overflow-scrolling: touch;
}

.xmn-offcanvas.is-open .mfp-content {
	transform: none;
}

/* Ngăn kéo bên phải (giỏ hàng): cùng khung với ngăn kéo menu, chỉ đổi phía. */

.xmn-offcanvas.off-canvas-right .mfp-content {
	right: 0;
	left: auto;
	width: 300px;
	background-color: #fff;
	transform: translateX(100%);
}

.xmn-offcanvas.off-canvas-right.is-open .mfp-content {
	transform: none;
}

.xmn-offcanvas.off-canvas-right .mfp-close {
	right: auto;
	left: 0;
}

/* Dưới 480px, site.css đặt `.off-canvas-cart{background:#fff !important}`. Theme
   cũ gắn class đó lên panel; theme mới gắn lên khung phủ kín màn hình, nên nền
   trắng che mất trang phía sau và panel rơi vào rule xanh ngọc vốn dành cho menu.
   Hai dòng dưới trả lại đúng phân vai: khung trong suốt, panel giỏ hàng trắng. */
.xmn-offcanvas.off-canvas-cart {
	background: transparent !important;
}

.xmn-offcanvas.off-canvas-cart .mfp-content {
	background: #fff !important;
}

.cart-popup-inner {
	padding: 30px 20px;
}

.cart-popup-title h4 {
	margin-bottom: 0.5em;
	font-size: 1em;
}

.cart-popup-inner .woocommerce-mini-cart__empty-message {
	margin: 0;
	text-align: center;
	color: #666;
}

.cart-popup-inner .cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-popup-inner .cart_list li {
	position: relative;
	padding: 10px 0 10px 60px;
	border-bottom: 1px solid #ececec;
	min-height: 70px;
}

.cart-popup-inner .cart_list li img {
	position: absolute;
	top: 10px;
	left: 0;
	width: 50px;
	height: auto;
}

.cart-popup-inner .cart_list li a.remove {
	position: absolute;
	top: 10px;
	right: 0;
}

.cart-popup-inner .total {
	margin: 1em 0;
	padding-top: 1em;
	border-top: 1px solid #ececec;
}

.cart-popup-inner .buttons .button {
	display: block;
	margin-bottom: 0.5em;
	text-align: center;
}

.xmn-offcanvas .mfp-close {
	position: fixed;
	top: 20px;
	right: 0;
	z-index: 3;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	line-height: 40px;
	opacity: 0.6;
	cursor: pointer;
}

.xmn-offcanvas .mfp-close:hover {
	opacity: 1;
}

.xmn-offcanvas .mfp-close svg {
	vertical-align: middle;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
}

/* Danh sách mục menu */
.off-canvas .sidebar-menu {
	padding: 30px 0;
}

.nav-sidebar.nav-vertical > li + li {
	border-top: 1px solid #ececec;
}

.nav-sidebar > li > a {
	color: rgba(102, 102, 102, 0.85);
}

.nav-sidebar > li > a:hover {
	color: rgba(17, 17, 17, 0.85);
}

.off-canvas .nav-vertical > li > a {
	padding-top: 15px;
	padding-bottom: 15px;
}

.off-canvas .nav-vertical li li > a {
	padding-top: 5px;
	padding-bottom: 5px;
}

.off-canvas .nav-vertical li > a {
	padding-left: 20px;
}

.nav-vertical > li.html {
	padding-top: 1em;
	padding-bottom: 1em;
}

.off-canvas .nav-vertical li.html {
	padding: 20px;
}

/* Menu con: thu gọn, bung khi mục mang class active (bấm nút mũi tên). */
.nav-sidebar .children {
	display: none;
}

.nav-sidebar li.active > .children {
	display: block;
}

.nav-sidebar .toggle {
	width: 45px;
	height: auto;
	margin: 0 5px 0 0;
	padding: 0;
	color: currentColor;
	line-height: 1;
	opacity: 0.6;
	box-shadow: none !important;
	transition: all 0.3s;
}

.nav-sidebar .toggle i {
	font-size: 1.8em;
	transition: all 0.3s;
}

.nav-sidebar .toggle:hover {
	opacity: 1;
}

.nav-sidebar li.active > .toggle {
	transform: rotate(-180deg);
}

html.has-off-canvas,
body.mobile-nav-open {
	overflow: hidden;
}

body.admin-bar .xmn-offcanvas .mfp-content {
	top: var(--wp-admin--admin-bar--height, 46px);
}

body.admin-bar .xmn-offcanvas .mfp-close {
	top: calc(var(--wp-admin--admin-bar--height, 46px) + 20px);
}

@media (prefers-reduced-motion: reduce) {
	.xmn-offcanvas .mfp-bg,
	.xmn-offcanvas .mfp-content {
		transition: none;
	}
}

.mfp-hide {
	display: none !important;
}

/* ==========================================================================
   Đường dẫn điều hướng
   ========================================================================== */

.rt-breadcrumbs {
	padding: 12px 0;
	color: var(--xmn-text-muted);
	font-size: 0.8rem;
}

.rt-breadcrumbs a {
	color: var(--xmn-link);
}

/* ==========================================================================
   Chân trang
   ========================================================================== */

.footer-wrapper .section {
	padding: 30px 0;
}

.footer-widgets .widget-title {
	color: inherit;
	font-size: 0.95rem;
	text-transform: uppercase;
}

.footer-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widgets ul li {
	margin-bottom: 6px;
}

.footer-widgets a {
	color: inherit;
	opacity: 0.85;
}

.footer-widgets a:hover {
	opacity: 1;
}

/* Vùng nền tối trong chân trang */
.footer .dark,
.footer-2,
section.dark {
	color: #fff;
}

section.dark h1,
section.dark h2,
section.dark h3,
section.dark h4,
section.dark a,
.footer-2 a,
.footer-2 .widget-title {
	color: #fff;
}

.absolute-footer {
	padding: 10px 0 15px;
	background-color: #f0f0f0;
	color: rgba(0, 0, 0, 0.5);
	font-size: 0.9em;
}

.absolute-footer .footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.absolute-footer .footer-nav li {
	margin: 0;
}

.copyright-footer {
	margin: 0;
}

/* ==========================================================================
   Nội dung chung
   ========================================================================== */

.xmn-main {
	display: block;
}

/* ==========================================================================
   Bài viết (tin tức)
   ========================================================================== */

.post {
	margin: 0 0 30px;
}

.entry-header-text {
	padding: 1.5em 0;
}

.entry-header-text.text-center {
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.entry-header-text-top {
	padding-top: 0;
}

.entry-header-text-bottom {
	padding-bottom: 0;
}

.entry-content {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.entry-image img {
	width: 100%;
}

h1.entry-title.mb {
	margin-bottom: 30px;
}

.article-inner {
	transition: opacity 0.3s, box-shadow 0.5s, transform 0.3s;
}

.article-inner.has-shadow {
	background-color: #fff;
}

.article-inner.has-shadow .entry-content,
.article-inner.has-shadow footer.entry-meta,
.article-inner.has-shadow .entry-header-text,
.article-inner.has-shadow .author-box {
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.article-inner.has-shadow .entry-header-text-top {
	padding-top: 1.5em;
}

/* Dòng chuyên mục, thẻ cuối bài */
footer.entry-meta {
	padding: 0.5em 0 0.6em;
	border-top: 1px solid #ececec;
	border-bottom: 2px solid #ececec;
	font-size: 0.8em;
}

.entry-author {
	padding: 2em 0;
}

/* Bài trước / bài sau */
.next-prev-nav .flex-col {
	padding: 0.7em 0;
}

.next-prev-nav .flex-col + .flex-col {
	border-left: 1px solid #ececec;
}

.next-prev-nav i {
	top: -1px;
	margin: 0 10px !important;
	font-size: 2em;
	vertical-align: middle;
}

.bt {
	border-top: 1px solid #ececec;
}

.bb {
	border-bottom: 1px solid #ececec;
}

a.plain {
	color: currentColor;
	transition: color 0.3s, opacity 0.3s, transform 0.3s;
}

/* ---------- Nhãn (ngày đăng trên ảnh bài viết, nhãn giảm giá) ---------- */

.badge {
	display: table;
	z-index: 20;
	width: 2.8em;
	height: 2.8em;
	pointer-events: none;
	backface-visibility: hidden;
}

.badge.top {
	left: 0;
}

.badge-inner {
	display: table-cell;
	width: 100%;
	height: 100%;
	padding: 2px;
	background-color: var(--primary-color, #446084);
	color: #fff;
	font-weight: bolder;
	line-height: 0.85;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s, border 0.3s;
}

.badge-small {
	width: 2.3em;
	height: 2.3em;
}

.badge-frame .badge-inner,
.badge-outline .badge-inner {
	border: 2px solid currentColor;
	background-color: #fff;
	color: var(--primary-color, #446084);
}

.badge-frame .badge-inner {
	background-color: transparent;
}

.badge-frame {
	height: 2em;
	margin-left: -4px;
}

.badge-outline,
.badge-circle {
	margin-left: -0.4em;
}

.badge-circle .badge-inner,
.badge-circle-inside .badge-inner {
	border-radius: 999px;
}

.badge.post-date {
	top: 7%;
}

/* ---------- Bình luận ---------- */

@media (min-width: 850px) {
	.comment-form {
		display: flex;
		flex-flow: row wrap;
		margin-left: -15px;
		margin-right: -15px;
	}

	.comment-form > div,
	.comment-form > p {
		width: 100%;
		padding: 0 15px;
	}

	.comment-form p.comment-form-author,
	.comment-form p.comment-form-email,
	.comment-form p.comment-form-url {
		flex: 1;
	}
}

.comment-list li {
	padding: 1em 0 0;
	list-style: none;
}

.comment-list > li:not(:first-child) {
	border-top: 1px dashed #ddd;
}

.comment-list li .avatar {
	border-radius: 100%;
}

#comments .comment-respond {
	margin-top: 15px;
	padding: 15px 25px 0;
	background-color: rgba(0, 0, 0, 0.05);
}

#comments .comment-respond .comment-reply-title {
	font-size: 1.2em;
}

/* Phân trang — dãy nút tròn nằm giữa, như theme cũ.
   Khung: ul.page-numbers.nav-pagination.links > li > a/span.page-number.
   Kích thước tính theo em để nút to nhỏ theo chữ; viền lấy màu chữ. */
ul.links {
	margin: 5px 0;
	font-size: 0.85em;
}

ul.links li {
	display: inline-block;
	margin: 0 0.4em;
}

ul.links li:first-child {
	margin-left: 0;
}

ul.links li:last-child {
	margin-right: 0;
}

ul.links li a {
	color: currentColor;
}

.nav-pagination > li > a,
.nav-pagination > li > span {
	display: block;
	min-width: 2.25em;
	height: 2.25em;
	padding: 0 7px;
	border: 2px solid currentColor;
	border-radius: 99px;
	font-size: 1.1em;
	font-weight: bolder;
	line-height: 2em;
	text-align: center;
	vertical-align: top;
	transition: all 0.3s;
}

.nav-pagination > li i {
	position: relative;
	top: -1px;
	font-size: 1.2em;
	line-height: 1.2;
	vertical-align: middle;
}

/* Trang hiện tại và khi rê chuột: nền màu chính. site.css có luật màu vàng
   cho chỗ này nhưng lớp CSS sinh từ cài đặt (inc/options.php) in sau nó và
   đè lại bằng màu chính (#008c84 trên site) — y như site gốc. */
.nav-pagination > li > .current,
.nav-pagination > li > span:hover,
.nav-pagination > li > a:hover {
	background-color: var(--primary-color, #446084);
	border-color: var(--primary-color, #446084);
	color: #fff;
}

/* Phân trang dạng mặc định của WordPress (chỉ còn ở template dự phòng). */
.pagination .nav-links {
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 2.25em;
	margin: 0 0.2em;
	padding: 0 7px;
	border: 2px solid currentColor;
	border-radius: 99px;
	line-height: 2em;
}

.pagination .page-numbers.current {
	background-color: var(--primary-color, #446084);
	border-color: var(--primary-color, #446084);
	color: #fff;
}

/* ==========================================================================
   Cột bên
   ========================================================================== */

.sidebar,
.sidebar-inner {
	font-size: 0.9rem;
}

.widget {
	margin-bottom: 1.5em;
}

/* Tiêu đề widget dạng <span> (in hoa do luật chung trong grid.css). */
span.widget-title {
	font-size: 1em;
	font-weight: 600;
}

/* Vạch ngắn dưới tiêu đề (widget, khối nội dung) */
.is-divider {
	display: block;
	width: 100%;
	max-width: 30px;
	height: 3px;
	margin: 1em 0;
	background-color: rgba(0, 0, 0, 0.1);
}

.widget .is-divider {
	margin-top: 0.66em;
}

.dark .is-divider {
	background-color: rgba(255, 255, 255, 0.3);
}

.text-center .is-divider {
	margin-left: auto;
	margin-right: auto;
}

.text-right .is-divider {
	margin-left: auto;
	margin-right: 0;
}

/* ==========================================================================
   Nút lên đầu trang
   ========================================================================== */

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background-color: #fff;
	color: var(--xmn-text-muted);
	font-size: 1.2rem;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(30%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.back-to-top:hover {
	background-color: var(--xmn-primary);
	border-color: var(--xmn-primary);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: none;
	}
}

/* ---------- Gợi ý tìm kiếm ----------
   Khối đổ xuống ngay dưới ô tìm kiếm, JS đổ nội dung vào (xem theme.js). */

.live-search-results {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 9;
	max-height: 70vh;
	overflow-y: auto;
	background-color: #fff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.live-search-results.is-open {
	display: block;
}

.live-search-results a,
.nav > li.html .live-search-results a,
.header-main .live-search-results a {
	color: #333;
}

.live-search-results .search-result {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid #ececec;
	color: #333;
	line-height: 1.3;
}

.live-search-results .search-result:hover {
	background-color: #f7f7f7;
}

.live-search-results .search-result img {
	width: 50px;
	height: auto;
	margin-right: 10px;
	flex: 0 0 auto;
}

.live-search-results .search-text {
	display: block;
	min-width: 0;
}

.live-search-results .search-name {
	display: block;
	font-size: 0.9em;
}

.live-search-results .search-price {
	display: block;
	font-size: 0.85em;
	font-weight: bold;
	color: #d0021b;
}

.live-search-results .search-price del {
	margin-right: 0.3em;
	font-weight: normal;
	opacity: 0.6;
}

.live-search-results .search-all {
	display: block;
	padding: 10px;
	text-align: center;
	font-size: 0.85em;
	text-transform: uppercase;
}

/* ---------- Cửa sổ "Xem nhanh" ----------
   Hộp giữa màn hình, nền mờ phía sau. Cùng cách dựng với ngăn kéo: JS chỉ bật
   tắt class .is-open. */

.xmn-modal {
	position: fixed;
	inset: 0;
	z-index: 1044;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s;
}

.xmn-modal.is-open {
	visibility: visible;
	opacity: 1;
}

.xmn-modal-bg {
	position: fixed;
	inset: 0;
	background-color: #0b0b0b;
	opacity: 0.8;
}

.xmn-modal-box {
	position: relative;
	width: 880px;
	max-width: calc(100% - 30px);
	max-height: 90vh;
	margin: 5vh auto;
	overflow-y: auto;
	background-color: #fff;
	-webkit-overflow-scrolling: touch;
}

.xmn-modal-x {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #333;
	font-size: 28px;
	line-height: 44px;
	opacity: 0.6;
	cursor: pointer;
}

.xmn-modal-x:hover {
	opacity: 1;
}

.xmn-modal.is-loading .xmn-modal-content::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin: 60px auto;
	border: 2px solid #ddd;
	border-top-color: var(--xmn-primary, #008c84);
	border-radius: 50%;
	animation: xmn-spin 0.8s linear infinite;
}

@keyframes xmn-spin {
	to { transform: rotate(360deg); }
}

.xmn-modal .product-quick-view-container {
	padding: 20px;
}

html.has-modal {
	overflow: hidden;
}